<template>
	<view class="content">

		<view class="box">
			<view class="box_title">
				{{wordHead}}
			</view>
			<view class="flex flex-wrap">
				<view class="box_list u-line-1 text-center" v-for="(i,v) in tran" :key="v"
					:class="current==i.tranCn?'hover_list':''" @click="hoverClick(i,v)">
					{{i.transtr}}
				</view>
			</view>
		</view>
		<view class="pos">
			<view class="warn flex items-center flex-center">
				<image src="../../static/alarm-icon.png" mode="" class="warn_img"></image>
				<view class="warn_title">
					给单词起个名字，选择一个您喜欢的
				</view>
			</view>
			<view class="btn" @click="nextClick()">
				修改
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
	} from '@dcloudio/uni-app';
	const percentage = ref(10)
	const current = ref(-1)
	const id = ref('')
	const wordId = ref('')
	const tran = ref([])
	const wordHead = ref('')
	const word_Scn = ref('')

	const hoverClick = (i, v) => {
		current.value = i.tranCn
	}
	const getSingleWordApi = inject('getSingleWord')
	const updateWordScnaApi = inject('updateWordScn')
	onLoad((op) => {
		console.log(op, '参数')
		id.value = op.id
		wordId.value = op.wordId
		getSingleWordApi({
			id: id.value,
			wordId: wordId.value
		}).then(res => {
			console.log(res)
			tran.value = res.wordInfo.tran
			current.value = res.wordInfo.word_Scn
			wordHead.value = res.wordInfo.wordHead
		})

	})
	const nextClick = () => {
		updateWordScnaApi({
			id: id.value,
			tran: current.value,
		}).then(res => {
			console.log(res, 106)
			uni.navigateBack()

		})
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #fff;


		.box {
			padding: 32rpx;

			.box_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 60rpx;
				color: #333333;
				line-height: 70rpx;
				text-align: center;
				padding: 100rpx 0;
			}

			.box_list {
				width: 196rpx;
				padding: 0 10rpx;
				height: 100rpx;
				background: #EBEBEB;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				line-height: 100rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				margin-right: 15rpx;
				margin-bottom: 20rpx;
			}

			.hover_list {
				background: #51D580;
				color: #FFFFFF;
			}
		}

		.pos {
			position: fixed;
			bottom: 36rpx;
			left: 24rpx;

			.warn {
				padding-bottom: 24rpx;

				.warn_img {
					width: 28rpx;
					height: 28rpx;
					margin-right: 12rpx;
				}

				.warn_title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.btn {
				width: 702rpx;
				height: 104rpx;
				background: #51D580;
				border-radius: 92rpx 92rpx 92rpx 92rpx;
				line-height: 104rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

	}
</style>